<template>
    <div class="article-list">
        <ul class="article-list-header">
            <li
                v-for="(item, index) in tags"
                :key="index"
                @click="handleChangeView(item)"
                :class="{ active: item.name === activeName }"
            >
                {{ item.name }}
            </li>
        </ul>
        <div class="content-container">
            <div style="width: 100%; height: 100%">
                <content-list :contentList="articleDatas"></content-list>
            </div>
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="total,prev,pager,next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :total="total"
                    pager-count="3"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import ContentList from "../components/ContentList";
import { getListByTag, getAllTags } from "../api/index";

export default {
    name: "article-list",
    components: {
        ContentList,
    },
    data() {
        return {
            articleDatas: [], // 文章数据
            pageSize: 8, // 页面大小，一页有10条数据
            currentPage: 1, // 当前页，默认第一页
            total: 0,
            tags: [
                {
                    name: "全部文章",
                },
            ], // 标签
            activeName: "全部文章", // 当前标签
            activeId: "", // 当前选中的标签id
        };
    },
    computed: {},
    mounted() {
        let activeId = this.$route.params.id;
        if (activeId) {
            this.activeId = activeId;
        }
        let activeName = this.$route.params.name;
        if (activeName) {
            this.activeName = activeName;
        }
        this.getTages();
        this.goArticleListOfTag(this.activeId);
    },

    methods: {
        getTages() {
            getAllTags().then((res) => {
                this.tags = this.tags.concat(res.data);
            });
        },
        // 获取当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.goArticleListOfTag(this.activeId);
        },
        // 根据style显示对应的文章
        handleChangeView(item) {
            this.activeName = item.name;
            this.articleDatas = [];
            this.currentPage = 1;
            if (item.name === "全部文章") {
                this.goArticleListOfTag("");
            } else {
                this.goArticleListOfTag(item.id);
            }
        },
        // 根据style查询对应的文章
        goArticleListOfTag(tagId) {
            getListByTag({
                current: this.currentPage,
                pageSize: this.pageSize,
                tagId: tagId,
            }).then((res) => {
                this.total = res.data.total;
                this.articleDatas = res.data.records;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/article-list.scss";
</style>
